import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { withRouter } from 'react-router';

import Tabs, { TabPane } from '@kuiper-components/tabs';
import Nonsupport from '../../../components/Nonsupport';
import Helper from '../../../components/Helper';
import Breadcrumb, { Item } from '../../../components/Breadcrumb';
import Label from '../../../components/Label';
import Overview from './Overview';
import Table from './Table';
import s from './style.module.css';

const TASK_CATEGORY = {
	vul: 'Web漏洞',
	ssl: 'SSL安全',
	securityEvent: '安全事件',
	content: '内容违规',
	changeCheck: '篡改',
	aviliable: '可用性',
	asset: '资产变动',
	host: '主机资产',
};

class AlertList extends React.PureComponent {
	static propTypes = {
		className: PropTypes.string,
		match: PropTypes.shape({
			params: PropTypes.shape({
				category: PropTypes.string,
			}),
		}),
		history: PropTypes.shape({
			push: PropTypes.string,
		}),
	};

	static defaultProps = {
		className: '',
	};

	containerRef = React.createRef();

	getDropdownRef = () => this.containerRef.current;

	handleTypeChange = category => {
		this.props.history.push(`/alert/list/${category}`);
	};

	render() {
		const {
			className,
			match: {
				params: { category },
			},
		} = this.props;
		const resD = JSON.parse(sessionStorage.resD).feature;
		const checkFeat = type => {
			console.log(type);
			if (type === 'vul') {
				return resD.vulManualTask || resD.vulTask;
			} else if (type === 'ssl') {
				return resD.sslManualTask || resD.sslTask;
			} else if (type === 'securityEvent') {
				return resD.securityEventManualTask || resD.securityEventTask;
			} else if (type === 'content') {
				return resD.contentManualTask || resD.contentTask;
			} else if (type === 'asset') {
				return resD.assetManualTask || resD.assetTask;
			} else if (type === 'aviliable') {
				return resD.httpTask || resD.pingTask;
			} else if (type === 'changeCheck') {
				return resD.changeCheckTask;
			} else if (type === 'host') {
				return resD.hostVulManualTask || resD.hostVulTask;
			} else {
				return true;
			}
		};
		return (
			<div className={cn(className, s.alertList)} ref={this.containerRef}>
				<div className={s.head}>
					<Breadcrumb className={s.breadcrumb}>
						<Item disabled key="alertCentre">
							告警中心
						</Item>
						<Item active key="alertList">
							告警列表
						</Item>
					</Breadcrumb>
				</div>
				<div className={s.container}>
					<Label className={s.label}>
						概况
						<Helper
							overlay="以下数据为所有资产的发现风险告警次数统计。"
							placement="right"
						/>
					</Label>
					<Overview className={s.overview} />
					<Label>告警详情</Label>
					<Tabs
						type="card"
						className={s.tabs}
						activeKey={category}
						onChange={this.handleTypeChange}
					>
						{Object.entries(TASK_CATEGORY).map(([key, val]) => {
							return <TabPane key={key} tab={val} />;
						})}
					</Tabs>
					{checkFeat(category) ? (
						<Table
							key={category}
							category={category}
							getDropdownRef={this.getDropdownRef}
						/>
					) : (
						<div className={s.noBox}>
							<Nonsupport className={s.fff}></Nonsupport>
						</div>
					)}
				</div>
			</div>
		);
	}
}

export default withRouter(AlertList);
